<template>
    <div class="mainItem">
        <div class="boxmock" v-loading="loading" v-if="loading" :class="loading ? 'blurView' : ''"></div>
        <div class="mainItem-head">人事数据分析</div>

        <div class="chartV">
            <div id="mr2V" ref="mr2V"></div>
            <div class="dateRange">
                <div :class="['dateRangei', dateRangeIndex == o ? 'dateRangeiA' : '']" v-for="(i, o) in dateRangeList"
                    :key="o" @click="dateRangeIndex = o">{{ i }}
                </div>
            </div>
        </div>

        <div class="pV">
            <el-carousel height="480px" indicator-position="none" :autoplay="false" :interval="5000" :loop="true">
                <el-carousel-item v-for="(n, m) in groupedItems" :key="m">
                    <div class="pViss">
                        <div class="pVis" v-for="(i, o) in n" :key="o">
                            <img v-if="i.type == 0 && i.sex == 0" src="@/assets/ys1.png" alt="">
                            <img v-if="i.type == 0 && i.sex == 1" src="@/assets/ys2.png" alt="">
                            <img v-if="i.type == 1 && i.sex == 0" src="@/assets/hs1.png" alt="">
                            <img v-if="i.type == 1 && i.sex == 1" src="@/assets/hs2.png" alt="">
                            <div class="pVisc">
                                <div class="pVisct">
                                    <div class="pVii " style="width: 90px;">{{ i.name }}</div>
                                    <div class="pVii " style="font-size: 18px;width: 60px;">{{ i.age }}岁</div>
                                    <div class="pVii " style="font-size: 18px;width: 100px;color: #8c98bf;">{{ i.xueli
                                        }}</div>
                                </div>
                                <div class="pViscb">
                                    <div class="pVii " style="width: 120px;">{{ i.zhicheng }}</div>
                                    <div class="pVii " style="width: 120px;">{{ i.keshi }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>

        <img class="mainItem-footer" src="@/assets/l.png" alt="">
    </div>
</template>

<script>
import { fetchGet } from '@/api/request'
export default {
    data() {
        return {
            loading: false,
            dateRangeList: ['学历', '科室', '职称'],
            dateRangeIndex: 0,
            xdata: ['院士', '博士', '硕士', '本科'],
            sData: [22, 252, 473, 756],
            mr2V: null,
            pList: [
                { name: '张三', sex: 1, type: 1, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 0, type: 1, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 1, type: 1, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 0, type: 1, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 0, type: 0, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 1, type: 0, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 1, type: 1, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 0, type: 1, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 0, type: 0, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 1, type: 0, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 0, type: 0, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 1, type: 1, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 0, type: 1, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 1, type: 1, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 0, type: 1, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 0, type: 0, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 1, type: 0, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 1, type: 1, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 0, type: 1, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 0, type: 0, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 1, type: 0, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 0, type: 0, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 1, type: 0, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
                { name: '张三', sex: 1, type: 0, xueli: '硕士', age: '52', keshi: '放射科', zhicheng: '主任医师' },
            ],
            groupSize: 5, // 每组的元素数量
        }
    },
    computed: {
        groupedItems() {
            const grouped = [];
            for (let i = 0; i < this.pList.length; i += this.groupSize) {
                grouped.push(this.pList.slice(i, i + this.groupSize));
            }
            return grouped;
        },
    },
    mounted() {
        this.$nextTick(() => {
            this.mr2V = this.$echarts.init(this.$refs.mr2V);
            this.chartInit();
        });
    },
    watch: {
        hIndex: function (infoData) {
            this.chartInit();
        },
        dIndex: function (infoData) {
            this.chartInit();
        },
    },
    methods: {
        chartInit() {
            this.loading = true;
            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: '3%',
                    left: '13%',
                    right: '5%',
                    bottom: '15%',
                    containLabel: true
                },
                dataZoom: [
                    {
                        type: 'inside',
                    },
                    {
                        left: '14%',
                        width: '80%',
                        bottom: 10,
                        height: 15,
                        type: 'slider',
                    },
                ],
                xAxis: {
                    type: 'category',
                    data: this.xdata,
                    axisLine: {
                        lineStyle: {
                            color: "#cccccccc",
                        }
                    },
                    axisTick: {
                        alignWithLabel: true,
                        lineStyle: {
                            color: "#eeeeee55",
                        }
                    },
                    axisLabel: {
                        interval: false,
                        width: 80,
                        align: 'center',
                        color: '#fff',
                        fontSize: 10,
                        width: 30,
                        overflow: 'truncate'
                    },
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#eeeeee55",

                        }
                    },
                    axisLabel: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        barWidth: '10',
                        type: 'bar',
                        itemStyle: {
                            barBorderRadius: [10, 10, 0, 0],
                            color: new this.$echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0, color: '#ff6d87' },
                                    { offset: 1, color: '#797de1' }
                                ]
                            )
                        },
                        data: this.sData
                    },
                ]
            };

            this.mr2V.setOption(option)
            this.loading = false;
        }
    },
}
</script>

<style lang="scss" scoped>
.mainItem {
    width: 400px;
    height: 740px;
    position: relative;

    .chartV {
        height: 180px;
        width: 400px;
        position: absolute;
        top: 40px;
        left: 0;

        #mr2V {
            width: 100%;
            height: 100%;
        }

        .dateRange {
            position: absolute;
            left: 10px;
            top: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: absolute;
            border-radius: 12px;
            overflow: hidden;
            background-color: #35394b;
            width: 30px;
            height: 180px;
            box-shadow: 0 4px 8px 0 #00000099, 0 6px 20px 0 #00000099;
            z-index: 4;

            .dateRangei {
                width: 30px;
                text-align: center;
                height: 52px;
                padding-top: 8px;
                color: #aaa;
                cursor: pointer;
                transition: all 1s;
                font-family: PMZD;
                font-size: 20px;
                background-color: transparent;
                text-shadow: 0 0 5px #000;
                word-break: break-all;
            }

            .dateRangeiA {
                color: #fff;
                background: linear-gradient(to right, #d5628a, #9769d3);
            }
        }
    }


    .pV {
        width: 100%;
        height: 480px;
        position: absolute;
        left: 0;
        top: 240px;

        .pViss {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            height: 480px;

            .pVis {
                width: 90%;
                background-color: #40455c66;
                display: flex;
                align-items: center;
                padding: 10px 0;
                border-radius: 12px;
                box-shadow: inset 0 0 8px #000000cc;

                img {
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                    border: 2px solid #9769d3;
                    background-color: #2a2c3c;
                    margin: 0 20px;
                }

                .pVisc {
                    font-size: 20px;
                    font-family: "SJYHJT";
                    color: #fff;
                }

                .pVisct {
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-end;
                }

                .pViscb {
                    display: flex;
                    align-items: center;
                    color: #8c98bf;
                    font-size: 16px;
                    margin-top: 10px;
                }

                .pVii {
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }

}
</style>